<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<link rel="icon" href="/uploads/<?php echo $project_code; ?>/favicon.ico" type="image/x-icon" />
	<link rel="shortcut icon" href="/uploads/<?php echo $project_code; ?>/favicon.ico" type="image/x-icon" />
	<title><?php echo "$project_name - ".$widget_name; ?></title>
	<script>var zmdoc = zmdoc||{};</script>
	<!--[if IE]>
		<script type="text/javascript" src="http://html.zmaitech.com/document/common/html5.js"></script>
	<![endif]-->
	<script type="text/javascript" src="<?php echo base_url() ?>/document/common/z.js"></script>
	<script type="text/javascript" src="<?php echo base_url() ?>/document/common/grid.js"></script>
	<style type="text/css">
	@charset "utf-8";/*ZMAITECH.COM*/	body,	html,        nav,	ol,	th,	embed,	abbr,	li,	input,	gloabl,	h2,	input,		td,	h1,	blockquote,	xml,		div,	dl,	dt,	dd,	ul,		h3,	h4,	h5,	h6,	pre,	form,	fieldset,		p{margin:0;padding:0;}	img,	fieldset, 	body,	html{border:none;}	address,	caption,	cite,	code,	dfn,	em,	strong,	th,	abbr,	var{font-style:normal;font-weight:normal;}	ol,	ul {list-style:none;}	caption,	th {text-align:left;}	h1,h2,h3,h4,h5,h6{font-size:100%;line-height:1}	q:before,q:after{content:'';}	table {border-collapse:collapse;border-spacing:0;}	html {font:12px/150% "Microsoft Yahei","SimSun","Helvetica Neue",Helvetica,Arial,sans-serif; color:#333;background-color: #FFF;}	h1{font-size:100%;}	h2, .h2 {font-size:16px;}	h3, .h3 {font-size:14px;}	h4, .h4 {font-size:12px;}	h5, .h5 {font-size:11px;}	strong {font-weight:bold;}/* ----- core css ------ */
	pre,textarea {
		-o-tab-size: 2;
		-moz-tab-size: 2;
		tab-size: 2;
		-webkit-tab-size: 2;
	}
	html,body {
		margin: 0;padding: 0;
		height:100%;
		background-color: #F2F2F2;
		font-size: 12px;
		overflow: hidden;
	}
	header {
		position: absolute;
		background-color: #F2F2F2;
		left:0;
		top:0;
		width: 100%;
		height: 20px;
		padding: 5px 0;
		overflow: hidden;
	}
	header button {
		cursor: pointer;
		margin-right: 10px;
	}
	footer {
		position: absolute;
		width:210px;
		bottom:0;
	}
	footer a {
		position: relative;
		display: inline-block;
		padding:10px;
		font-size: 10px;
		height: 20px;
		text-align: center;
		line-height: 15px;
		-webkit-transform: skew(0deg);
		   -moz-transform: skew(0deg);
		     -o-transform: skew(0deg);
		background-color: #444;
		color: #EEE;
		text-decoration: none;
	}
	footer a.selected {
		background-color: #A00;
	}
	footer a b {
		position: absolute;;
		right: 2px;
		top: 2px;
		padding: 2px;
		border-radius: 2px;
		background-color: #F33;
		font-size: 0;
		background-clip: padding-box;

	}
	div#editor {
		width: 60%;
		height: 100%;
		float: left;
		overflow: hidden;
		position: relative;
	}
	div#panel_wrap {
		
		margin-left: 60%;
		width:40%;
		height: 100%;
		position: relative;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-o-box-sizing: border-box;
		-moz-box-sizing: border-box;
		overflow: hidden;
	}
	div#panel {
		width:1000%;
		overflow:hidden;
		height:100%;
		transition: all 0.5s ease 0s;
		-moz-transition: all 0.5s ease 0s;
		-webkit-transition: all 0.5s ease 0s;
		-o-transition: all 0.5s ease 0s;
	}
	section {
	   width:10%;
	   float: left;
	   height: 100%;
	   overflow: hidden;
	   position: relative;
	}
	#page {
		padding-top: 30px;
	}

	textarea {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-o-box-sizing: border-box;
		-moz-box-sizing: border-box;
		margin: 0;
		border:1px solid #DDD;
		padding: 5px;
		background-color:#F2F2F2;
		resize:none;
	}
	textarea:focus {
		
		background-color:#fffdd6;
	}

	textarea#tHTML{
		width: 70%;
	}
	textarea#tCSS{
		width: 30%;
	}

	
	#csssplit,
	#split {
		position: absolute;
		width: 6px;
		height: 80px;
		top: 50%;
		margin-top: -40px;
		background: #bbb;
		cursor: col-resize;
	}
	#csssplit {
		left:30%;
		background-color: #222;
		margin-left: -3px;
	}
	#win label {
		display: block;
		margin: 15px 0;
	}
	#win label span {
		margin-right: 5px;
	}
.zm-grid {
	background:#fff;
	color:#333;
	font-family: 'trebuchet MS', 'Lucida sans', Arial;
}
.zm-grid .zm-grid-header {
	font-weight: bold;
}
.zm-grid li {
	float:left;
	overflow:hidden;
	padding:5px;
}

.zm-grid .zm-grid-tbody {
	overflow: auto;
}

.zm-grid ul.row_odd{
	background-color: #FAFAFA;
}
.zm-grid ul:hover{
	background-color: #EFEFEF;
}
.zm-grid ul {
	border-bottom:1px solid #EDEDED;
}
.zm-grid li._gridAction a{
	margin-right:10px;
	color:#034895;
	white-space:nowrap;
	display:inline-block;
	text-decoration:underline;
}
.zm-grid ul, .zm-grid ol {
	border-bottom:1px solid #EDEDED;
	clear:both; zoom:1;
}
.zm-grid ul:after, .zm-grid ol:after {content:"."; clear:both; display:block; height:0; font:0/0 arial; visibility:hidden;}

.zm-grid .filter-field {
width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	height: 26px;
	line-height: 26px;
	display: block;
}
.zm-grid .zm-grid-column-filter div {
	position:relative;
}
.zm-grid .filter-search {
	display:none;
	position: absolute;
	top:1px;
	right: 0;
	background:red;
	width: 26px;
	height: 24px;
	background:transparent url(/uploads/code_image/9/search-btn.jpg) no-repeat center center;
	background-color: #fefefe;
	border:1px #bbb solid;
	border-width: 0 1px;
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}


.zm-grid .zm-grid-pagebar {
	background-color: #fafafa;
	border-top: 1px solid #eee;
	color: #666;
	height: 20px;
	line-height: 20px;
	padding: 5px;
	position: relative;
	text-align: right;
}
.zm-grid .zm-grid-pagebar div{
	position: absolute;
	text-align: center;
}

.zm-grid .zm-grid-pagebar a,.zm-grid .zm-grid-pagebar em {
	text-decoration: none;
	display: inline-block;
	padding:0 10px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	color:#333;
	font-size:12px;
}
.zm-grid .zm-grid-pagebar a:hover {
	background:#eee;
}
.zm-grid .zm-grid-pagebar .js-page-last {
	border-right:none;
}
.zm-grid .zm-grid-pagebar a.disabled {
	color: #999;
}
.zm-grid .zm-grid-pagebar em {
	color:#999;
	text-decoration:underline;
	font-weight: bold;
}
.zm-grid .zm-grid-pagebar select {
	margin:0 5px;
}
.zm-grid .zm-grid-pagebar b {
	background:transparent url(/uploads/code_image/9/refresh.png) no-repeat center center;
	display: inline-block;
	width: 25px;
	cursor:pointer;
}
.zm-grid .zm-grid-pagebar b:hover {
	background-color:#eee;
}
.zm-grid .zm-page-percent {
	float:right;
}

.zm-grid-tbody li input {
	width: 100%;
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.zm-grid .zm-grid-topbar {
	text-align: right;
	position: relative;
	padding: 5px;
	height: 40px;
}
.zm-grid .zm-grid-topbar h2 {
	position: absolute;
	left: 5px;
	font-size: 14px;
	top: 13px;
}
.zm-grid button.zm-grid-topbar-button  {
	display: inline-block;
	zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
	*display: inline;
	vertical-align: baseline;
	margin: 0 2px;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 16px/100% Arial, Helvetica, sans-serif;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
	color: #fef4e9;
	border: solid 1px #da7c0c;
	background: #f78d1d;
	background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
	background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
	margin-left: 10px;
	padding: .4em 1.5em .42em;
}
.zm-grid button.zm-grid-topbar-button:hover {
	background: #f47c20;
	background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
	background: -moz-linear-gradient(top,  #f88e11,  #f06015);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.zm-grid button.zm-grid-topbar-button:active {
	position: relative;
	top: 1px;
	color: #fcd3a5;
	background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
	background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}
	</style>
	<script type="text/javascript">
		var ZM=ZM||{}, attr = {};
		attr.project_name = '<?php echo $project_name; ?>';
		attr.widget_id = <?php echo $widget_id?>;
		attr.widget_name = '<?php echo $widget_name; ?>';
		attr.code = <?php echo json_encode($code) ?>;
		attr.project_id = <?php echo $project_id ?>;
		attr.project_code = '<?php echo $project_code ?>';
		attr.widget_time_lastmodified = '<?php echo $widget_time_lastmodified?>';
		attr.lastPanel; 
		attr.jumpData = {'html':'0','javascript':'-100%','sprite':'-200%','image':'-300%'};
		attr.tagData = {'80':'p','72':'h2','87':'widget','76':'li'};
		ZM.jump = function (k,el) {
			var left = 0;
			if(attr.jumpData[k]) {
				left = attr.jumpData[k];
			}
	
			$(el).addClass('selected');
			if(attr.lastPanel&&$(el)!=attr.lastPanel){
				attr.lastPanel.removeClass('selected');
			}
			attr.lastPanel = $(el);
			$('#panel').css('margin-left',left);
			if(k=='html') updateOuput();
		}
		ZM.wrapTag = function(el, tag) {
			if(attr.tagData[tag]) {
				tag = attr.tagData[tag];
			} else {
				tag = 'p';
			}
			textarea = el,sel = {},val = el.value;;
		    if (textarea.setSelectionRange) { // W3C
		        sel.start= textarea.selectionStart;
		        sel.end = textarea.selectionEnd;
		        var text = '<'+tag+'>'+val.slice(sel.start,sel.end)+'</'+tag+'>';
		        el.value = val.slice(0, sel.start) + text + val.slice(sel.end);
		    }
		}
		ZM.insertAtCursor = function(myField, myValue) {
			var rangData = ZM.getCursorPosition(myField);
			var restoreTop = myField.scrollTop;
			if(myValue == '\t') {
				var textarea = myField;
				var s = textarea.value.substring(0,rangData.start).lastIndexOf('\n')
					,s = s > -1 ? s + 1: 0,
					n = 0;
				while(true) {
					textarea.value = textarea.value.substring(0,s) + '\t' + textarea.value.substring(s);
					n++;
					rangData.end += 1;
					var pos = textarea.value.substring(s,rangData.end).indexOf('\n');
					if(pos == -1) break;
					s = s+pos+1;
				}
				rangData.start += 1;
			} else {
				myField.value = myField.value.substring(0,rangData.start) + myValue + myField.value.substring(rangData.start);
				rangData.start = (rangData.end += myValue.length);
			}
			ZM.setCursorPosition(myField,rangData);
			if (restoreTop>0){
			    myField.scrollTop = restoreTop;
			}
		}

		ZM.removeLineAtCursor = function(myField) {
			var rangData = ZM.getCursorPosition(myField);
			var restoreTop = myField.scrollTop;
			var start = Math.max(0,myField.value.lastIndexOf("\n",rangData.start)),end = myField.value.indexOf("\n",rangData.end);
			if(start==0){
				myField.value = myField.value.substring(end+1);
			}else if(start==end){
				start = Math.max(0,myField.value.lastIndexOf("\n",rangData.start-1));
				myField.value = myField.value.substring(0,start) + myField.value.substring(end);
			}else if(end==-1){
				myField.value = myField.value.substring(0,start);
			}else{
				myField.value = myField.value.substring(0,start) + myField.value.substring(end);
			}
			rangData.start = start;
			rangData.end = start;

			ZM.setCursorPosition(myField,rangData);
			if (restoreTop>0){
			    myField.scrollTop = restoreTop;
			}
		}

		ZM.getCursorPosition = function(textarea) {
			var rangeData = {text: "", start: 0, end: 0 };
			textarea.focus();
		    if (textarea.setSelectionRange) {
		        rangeData.start= textarea.selectionStart;
		        rangeData.end = textarea.selectionEnd;
		        rangeData.text = (rangeData.start != rangeData.end) ? textarea.value.substring(rangeData.start, rangeData.end): "";
		    } else if (document.selection) { 
		        var i,
		            oS = document.selection.createRange(),
		            oR = document.body.createTextRange();
		        oR.moveToElementText(textarea);

		        rangeData.text = oS.text;
		        rangeData.bookmark = oS.getBookmark();
		        for (i = 0; oR.compareEndPoints('StartToStart', oS) < 0 && oS.moveStart("character", -1) !== 0; i ++) {
		            if (textarea.value.charAt(i) == '\n') {
		                i ++;
		            }
		        }
		        rangeData.start = i;
		        rangeData.end = rangeData.text.length + rangeData.start;
		    }

		    return rangeData;
		}

		ZM.setCursorPosition = function(textarea, rangeData) {
		    if(!rangeData) {
		        alert("You must get cursor position first.")
		    }
		    if (textarea.setSelectionRange) {
		        textarea.focus();
		        textarea.setSelectionRange(rangeData.start, rangeData.end);
				
		    } else if (textarea.createTextRange) {
		        var oR = textarea.createTextRange();
		        if(textarea.value.length === rangeData.start) {
		            oR.collapse(false)
		            oR.select();
		        } else {
		            oR.moveToBookmark(rangeData.bookmark);
		            oR.select();
		        }
		    }
		}

		ZM.replaceText = (function(r){
		 return function(text,find, replace, replaceOnce) {
		     if(typeof find == 'string' && !replaceOnce) {
		       find = r.apply(find, [/[\[\]^$*+.?(){}\\\-]/g,function(c) { return '\\'+c; }]);
		       find = new RegExp(find, 'g');
		     } else if(typeof find == 'object' && !replaceOnce && !find.global) {
		       find = new RegExp(find.source, 'g');
		     }
		     return r.apply(text, [find,replace]);
		 }
		})(String.prototype.replace);

		ZM.tzdragg = function(id,move){
			var self = this; 
			 $('#'+id).on('mousedown',function(e) {
			 		$('#iframe_code_output').css({'pointer-events':'none'});
			 		$('#iframe_sprite').css({'pointer-events':'none'});
		          $(document).on('mousemove',move);
		    }).on('mouseup',function(){
		    	$('#iframe_code_output').css({'pointer-events':'auto'});
		    	$('#iframe_sprite').css({'pointer-events':'auto'});
		    	$(document).un('mousemove',move);
		    })
			$(document).on('mouseup',function(e){
				$('#iframe_code_output').css({'pointer-events':'auto'});
				$('#iframe_sprite').css({'pointer-events':'auto'});
		      $(document).un('mousemove',move);
		    });
		    
		    return this;
		};
		
	</script>
</head>
<body class="zm">
	<div id="editor">
	<textarea id="tCSS" placeholder="css"><?php echo $code['widget_css']; ?></textarea><!-- 
				--><div id="csssplit"></div><textarea id="tHTML" placeholder="html"><?php echo htmlspecialchars($code['widget_html']); ?></textarea>
	</div>

	<div id="panel_wrap">
		<div id="panel">
			<section id="page">
				<header><button onclick="save();">保存</button><button onclick="$('#frm').reset();$('#win').show().win({width:250,height:200});">替换</button><a href="<?php echo base_url('widget_edit/templateView/'.$widget_name.'/'.$project_id) ?>" target="_blank">预览</a></header>
				<iframe  style="pointer-events: none;" width="100%" height="100%" frameborder="0" src="javascript:;" name="code_output" id="iframe_code_output"></iframe>
				
			</section>

			<section>
				<textarea id="tJAVASCRIPT" placeholder="javascript"><?php echo htmlspecialchars($code['widget_js']); ?></textarea>
			</section>

			<section><iframe id="iframe_sprite" width="100%" height="100%" frameborder="0" src="<?php echo base_url('canvas/'.$project_id);?>"></iframe></section>
			<section id="grid">
			</section>
		</div>
		<footer>
			<a href="javascript:void(0);" onmouseover="ZM.jump('html',this);" class="selected" id="js_html">页面预览</a>
			<a href="javascript:void(0);" onmouseover="ZM.jump('javascript',this);">JS<b id="js_existed"></b></a>
			<a href="javascript:void(0);" onmouseover="ZM.jump('sprite',this);">sprite</a>
			<a href="javascript:void(0);" onmouseover="ZM.jump('image',this);">图片</a>
		</footer><em id="split"></em>
	</div>
	<div id="win" style="display:none">
		<form id="frm" onsubmit="replaceAction(this);return false;">
			<label><span>查找目标</span><input id="field_target"></label>
			<label><span>替换文本</span><input id="field_replace"></label>
			<button type="submit">替换全部</button>
		</form>
	</div>
	<script type="text/javascript">
	if(attr.code.widget_js) {
		$('#js_existed').show();
	} else {
		$('#js_existed').hide();
	}

	attr.lastPanel = $('#js_html');
	var outputTimer =setTimeout(function(){},30);
	function updateOuput() {
		var tags = new Array('h1','h2','h3','h4','h5','h6','ul','ol','li','strong','span','div','td','tr','table','p','dd','dt','dl');
		var tags_l = tags.length;
		
		var d;
		if (document.all){//IE
                d = document.frames["code_output"].document;
        }else{//Firefox    
                d = document.getElementById("iframe_code_output").contentDocument;
        }

		var validate = true, tag;
		var cssField = $('#tCSS'),
			jsField = $('#tJAVASCRIPT'),
			htmlField = $('#tHTML');
		var v = htmlField.value;

		for(i=0; i < tags_l; i++){	
			var start = new RegExp('<'+tags[i]+'(\\s+[^>]+)*>','img');
			var end = new RegExp('<\?/'+tags[i]+'>','img'); //当结束标签进行Javascript转义时,也正确
			var start_l = 0;
			var end_l = 0;
			while(start.test(v)){
				start_l++;
			}
			while(end.test(v)){
				end_l++;
			}
			if(start_l!=end_l){
				validate = false;
				tag = tags[i];
				break;
			}
		}
		
		if(validate){
			htmlField.style.background = "";
		}else{
			htmlField.style.background = "#ffb5a8";
		}
		var strBody = '';
		strBody += '<style type="text/css">'+cssField.value.replace(/sprite.png/img,'sprite.png?'+new Date().valueOf())+'<\/style>';
		strBody += v;
		strBody += '<script type="text/javascript">'+jsField.value+'<\/script>';

		if(v.indexOf('<frameset') == -1 && v.indexOf('<FRAMESET') == -1) {
			strBody = '<body class="zm" style="padding:0;margin:0">'+strBody+'<\/body>';
		}
		d.open();
		d.write(attr.code.header_html+strBody+'<\/html>');
		d.close();
	}
	function renderHtml(e) {
		if(e !== false) {
			if (!e)
		        e = window.event;
		    var code = e.keyCode;
		    if (e.charCode && code == 0)
		          code = e.charCode;
	        if (code == 9) {
	            ZM.insertAtCursor(e.target,'\t');
	            if (e.preventDefault)
          			e.preventDefault();
	        }else if((e.ctrlKey||e.metaKey)&&code ==68){
	        	ZM.removeLineAtCursor(e.target);
	            if (e.preventDefault)
          			e.preventDefault();
	        }else if(code == 18){
	        	ZM.insertAtCursor(e.target,'<br />');
	            if (e.preventDefault)
          			e.preventDefault();
	        }else if ((e.ctrlKey||e.metaKey)&&attr.tagData[''+code]){
	            ZM.wrapTag(e.target,''+code);
	            if (e.preventDefault)
          			e.preventDefault();
	        }
		}
		
		clearTimeout(outputTimer);
		outputTimer = setTimeout(function(){
			updateOuput();
		},30);
	}
	$('#tHTML').on('keydown',renderHtml);
	$('#tCSS').on('keydown',renderHtml);
	$('#tJAVASCRIPT').on('keydown',renderHtml);

	function save() {
		$(document.body).mask('保存中...');
		$.ajax({
			url:"<?php echo base_url('widget_edit/editWidget'); ?>",
			params:{widget_id:attr.widget_id,widget_name:attr.widget_name,widget_time_lastmodified:attr.widget_time_lastmodified
				,widget_css:$('#tCSS').value,widget_js:$('#tJAVASCRIPT').value,widget_html:$('#tHTML').value},
			success:function(res) {
				attr.widget_time_lastmodified = res.addon.widget_time_lastmodified;
			  	$(document.body).unMask();
			  	if($('#tJAVASCRIPT').value) {
					$('#js_existed').show();
				} else {
					$('#js_existed').hide();
				}
			}
		});
	}

	function replaceAction(frm) {
		var name = ['tCSS','tJAVASCRIPT','tHTML'];
		var findV = $('#field_target').value;
		var replaceV = $('#field_replace').value;
		if(findV=='') return;
		if(confirm('确定要将字符串 '+findV+' 全部替换为 '+replaceV+' 吗?')) {
			for(var j = 0 ; j < name.length;j++) {
				$('#'+name[j]).value = ZM.replaceText($('#'+name[j]).value,findV,replaceV);
			}
			renderHtml(false);
		}
	}
	ZM.tzdragg('split',function(evt) {
			evt = evt || window.event;
            var posX = evt.clientX;

           var rate = posX*100.0/$Z(window).innerWidth;
            $('#panel_wrap').css({'margin-left':rate+'%','width':(100-rate)+'%'});
            $('#editor').css({'width':(rate)+'%'});

            grid.expandColumn();
		});
	ZM.tzdragg('csssplit',function(evt) {
			evt = evt || window.event;
            var posX = evt.clientX;

           var rate = posX*100.0/$('#editor').zmwidth();
            $('#tHTML').css({'width':(100-rate)+'%'});
            $('#tCSS').css({'width':(rate)+'%'});
            $('#csssplit').css('left',rate+'%');
		});

	renderHtml(false);

	function uploadFile(el,url) {
	  var passed = true;
	    // for(var index=0; index<el.files.length; index++){
	    //   var File = el.files[index];
	    //   if(File.type!="image/png"){
	    //     passed = false;
	    //   }
	    // }

	    if(el.files.length==0){
	      return;
	    }

	    // if(!passed){
	    //   alert('请上传png图片');
	    //   return;
	    // }

	    var xhrs = [], xhrimages = [];

	    for(var index=0; index<el.files.length; index++){
	      var File = el.files[index];

	      xhrs[index] = new XMLHttpRequest();
	      xhrs[index].index = index;
	      xhrs[index].open('post', url, true);
	      xhrs[index].setRequestHeader("Content-Type", "application/octet-stream");
	      xhrs[index].setRequestHeader("X-FILENAME", encodeURI(File.name)||'file');
	      xhrs[index].setRequestHeader("X-File-Size", File.fileSize);
	      xhrs[index].setRequestHeader("X-File-Type", File.type);
	      
	      xhrs[index].onreadystatechange = function(){
	        if (this.readyState == 4 && this.status == 200){
	          var r = {};
	          try {
	            r = eval("(" + this.responseText + ")");
	          } catch(err){}
	          if(r.success){
	            xhrimages[this.index]=r.addon.sprite_url;
	            if(xhrs.length==xhrimages.length){
	                grid.store.load();
	            }
	          }else{
	            alert(r.detail);
	          }
	        }
	      };
	      if ('getAsBinary' in File){
	        xhrs[index].sendAsBinary(File.getAsBinary());
	      }else{
	        xhrs[index].send(File);
	      }
	  }
	}

	var grid = $('#grid').grid({
		url: '<?php echo base_url('widget_edit/getProjectFileList') ?>',
		autoHeight:true,
		tbar:['<p style="text-align:left;padding-top:8px;"><input type="file" multiple="multiple" onchange="uploadFile(this,\'<?php echo base_url('widget_edit/addImage/'.$project_id);?>\');"/></p>'],
		params: {project_code:attr.project_code},
		bbar:false,
		columns:[
			{header:'缩略图',dataIndex:'project_file_url',renderer:function(val,r) {
				
				str = '<a href="'+val+'" target="_blank"><img src="'+val+'" height="60"></a>';
				str += '<p>'+r.project_file_widthheight.replace(/[a-z]*\=*\"*/g,'').replace(' ','x')+'</p>';
				if(r.project_file_widthheight == ''){
					return val;
				}
					return str;
				
			}},
			{header:'info',dataIndex:'project_file_name',width:150,renderer:function(v,r){
				str = '<p style="font-size:14px;font-style:italic;margin-bottom:15px;">'+r.project_file_name+'</p>';
				
				str += (r.project_file_size>180)?'<span style="color:red;">' + r.project_file_size + 'KB</span>':r.project_file_size+'KB'
				str += '<p style="font-size:9px">'+r.project_file_time_lastmodified+'</p>';
				return str;
			}},
			

			
			{header: "操作", type:'action', dataIndex: '',width:190,renderer:function(v,r){
					var str = "";
					str += '<a href="/download.php?file='+r.project_file_url+'" target="_blank">[下载]</a>';
					str += '<a href="#" title="fireDelete">[删除]</a>';
					if(r.project_file_widthheight!='')
						str += '<a href="#" title="fireInsert">[插入图片]</a>';
					
					return str;
				}
			}]
	});
	grid.store.load();
	grid.fireDelete = function(r) {
		if(confirm('确定删除图片?')) {
			$('#grid').mask('删除中...');
			$.ajax({
				url: "<?php echo base_url('project/removeProjectFile') ?>",
				params:{project_file_path:r.project_file_path},
				success: function(res) {
					$('#grid').unMask();
					grid.store.load();
				}
			});
		}
	}
	grid.fireInsert = function(r){
		ZM.insertAtCursor($('#tHTML'),r.project_file_html);
	}

	spriteCSS = function(html){
		ZM.insertAtCursor($('#tCSS'),html);
	}

	$(window).on("keydown", function(e) {
	  if (e.keyCode == 83 && (e.metaKey || e.ctrlKey)) {
			e.preventDefault();
			save();
	  }
	});

	$('#tHTML').on('focus',function(){

		ZM.jump('html',$('#js_html'));
	})
	$('#tCSS').on('focus',function(){

		ZM.jump('html',$('#js_html'));
	})
	</script>
</body>
</html>
